<template>
  <div class="car">
    <div class="loading-marks" v-if="loading">
      <img class="laoding-an" src="../assets/images/laoding.png" alt="" />
    </div>
    <div class="tips-marks" v-if="tipsLoading">
      <div class="tips-box">
        <div class="title">提示</div>
        <p>请升级最新版本</p>
        <div class="btn-close" @click="closeTips">确定</div>
      </div>
    </div>
    <div class="tips-marks" v-if="httpsLoading">
      <div class="tips-box">
        <div class="title">提示</div>
        <p>服务器发生异常</p>
        <div class="btn-close" @click="close">确定</div>
      </div>
    </div>
    <div class="no-sliding" v-show="noSlidingFlag"></div>
    <!-- 第二个swiper -->
    <headerBox :shareFlag="shareFlag" :title="headerTitle[swiperIndex]"></headerBox>
    <div class="swiper2" id="swiper2" :style="{ backgroundImage: 'url(' + cantaintbg + ')'}">
      <div class="robotbox" v-if="swiperIndex == 3 || swiperIndex == 4">
        <img v-if="swiperIndex == 3" class="pm animate__fadeInRighta" src="../assets/images/bill2022/2/img1.png">
        <img v-if="swiperIndex == 4" class="pm2 animate__fadeInRightb" src="../assets/images/bill2022/2/img4.png">
        <div class="animate__fadeInBottomLeft">
          <img class="robot2 robot " src="../assets/images/bill2022/2/img2.png">
        </div>

      </div>
      <div class="fd" v-if="swiperIndex == 7 || swiperIndex == 8">
        <img v-if="swiperIndex == 7" class="btm animate__fadeInRighta" src="../assets/images/bill2022/5/btm2.png">
        <img v-if="swiperIndex == 8" class="btm animate__fadeInRightb" src="../assets/images/bill2022/5/btm3.png">
        <div :class="['slideUp', swiperIndex == 7 && previousIndex < swiperIndex ? 'animate__fadeInBottomLeft' : '']">
          <img class="slideUp" src="../assets/images/bill2022/5/btm1.png">
        </div>
      </div>
      <!-- <div :class="['img1', swiperIndex == 5 && previousIndex < swiperIndex ? 'animate__fadeInUp' : '']" v-if="swiperIndex == 5 || swiperIndex == 6">
        <img v-if="swiperIndex == 5" class="img1_img_top " src="../assets/images/bill2022/3/img2.png" alt="" srcset="">
        <img v-else class="img1_img_top" src="../assets/images/bill2022/3/img3.png" alt="" srcset="">
        <img class="img1_img_btm" src="../assets/images/bill2022/3/img_btm.png" alt="">
      </div> -->
      <!-- <div class="jsc animate__backInUp" v-if="swiperIndex == 10 || swiperIndex == 11 || swiperIndex == 12 || swiperIndex == 13 || swiperIndex == 14">
       
        <img :class="['tpwz',jscwz==require('../assets/images/bill2022/w11/gwwz.png') ? 'gwwz' :'', swiperIndex == 10 && previousIndex < swiperIndex ? 'animate__backInUp' : '']" :src="jscwz">
        <img class="fc" src="../assets/images/bill2022/w11/jsc.png">
      </div> -->
      <swiper :options="swiperOption2" @slideChange="slideChange" ref="mySwiper">
        <!-- 第1页 -->
        <swiper-slide class="swiper-slide1">
          <div class="box" v-if="!linshiDatashow">
            <span @click="linshi(item.value)" class="buttons" v-for="(item,key) in nameList" :key="key">{{item.name}}</span>
          </div>
          <div class="div" ></div>
          <home v-if="linshiDatashow"></home>
        </swiper-slide>
        <!-- 第2页 -->

        <swiper-slide class="swiper-slide2">
          <div class="div"></div>
          <page1 :data="resData" v-if="resData"></page1>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第3页 -->
        <swiper-slide class="swiper-slide3">
          <div class="div" ref="page"></div>
          <page4></page4>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第4页 -->
        <!-- <img src="../assets/images/image_1.png"  ref="slide1"> -->
        <swiper-slide class="swiper-slide4">
          <div class="div"></div>
          <page2></page2>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第5页 -->
        <swiper-slide class="swiper-slide5" ref="slide1">
          <div class="div"></div>
          <page2y></page2y>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第6页 -->
        <swiper-slide class="swiper-slide6" ref="slide1">
          <div class="div"></div>
          <page3></page3>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第7页 -->
        <swiper-slide class="swiper-slide7" ref="slide1">
          <div class="div"></div>
          <page3y></page3y>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第8页 -->
        <swiper-slide class="swiper-slide8">
          <div class="div" ref="page"></div>
          <page5></page5>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第9页 -->
        <swiper-slide class="swiper-slide9">
          <div class="div" ref="page"></div>
          <page5y></page5y>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第10页 -->
        <swiper-slide class="swiper-slide10">
          <div class="div"></div>
          <!-- <button @click="cxckClick" >返回首页</button> -->
          <page10y :data="resData" v-if="resData"></page10y>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第11页 -->
        <swiper-slide class="swiper-slide11">
          <div class="div"></div>
          <pagew11 :data="resData" v-if="resData"></pagew11>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第12页 -->
        <swiper-slide class="swiper-slide12">
          <div class="div"></div>
          <pagew12 :data="resData" v-if="resData"></pagew12>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第13页 -->
        <swiper-slide class="swiper-slide13">
          <div class="div"></div>
          <pagew13></pagew13>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第14页 -->
        <swiper-slide class="swiper-slide14">
          <div class="div"></div>
          <pagew14></pagew14>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第15页 -->
        <swiper-slide class="swiper-slide15">
          <div class="div"></div>
          <pagew15></pagew15>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>

        <swiper-slide class="swiper-slide10">
          <div class="div"></div>
          <!-- <button @click="cxckClick" >返回首页</button> -->
          <page10y2 :data="resData" v-if="resData"></page10y2>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>

        <!-- 第16页 -->
        <swiper-slide class="swiper-slide16">
          <div class="div"></div>
          <page16 :data="resData" v-if="resData"></page16>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第17页 -->
        <swiper-slide class="swiper-slide17">
          <div class="div"></div>
          <page17 :data="resData" v-if="resData"></page17>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第18页 -->
        <swiper-slide v-if="jstshow" class="swiper-slide18">
          <div class="div"></div>
          <page18 :data="resData" v-if="resData"></page18>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>
        <!-- 第19页 -->
        <swiper-slide class="swiper-slide8">
          <div v-if="xp" class="div"></div>
          <page7 :theme="resData" :linshiData="linshiData" :key="key"></page7>
          <!-- <footerBox :showFlag="false"></footerBox> -->
        </swiper-slide>

      </swiper>
    </div>
    <footerBox v-if="swiperIndex!=lastpage" :showFlag="false"></footerBox>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import suspendedBall from '../components/suspendedBall.vue'
import headerBox from '../components/headerBox.vue'
import footerBox from '../components/footerBox.vue'
import home from '../components/bill2022/home.vue'
import page1 from '../components/bill2022/page1.vue'
import page2 from '../components/bill2022/page2.vue'
import page2y from '../components/bill2022/page2y.vue'
import page3 from '../components/bill2022/page3.vue'
import page3y from '../components/bill2022/page3y.vue'
import page4 from '../components/bill2022/page4.vue'
import page5 from '../components/bill2022/page5.vue'
import page5y from '../components/bill2022/page5y.vue'
import page6 from '../components/bill2022/page6.vue'
import page7 from '../components/bill2022/page7.vue'
import page10y from '../components/bill2022/page10y.vue'
import page10y2 from '../components/bill2022/page10y2.vue'
import pagew11 from '../components/bill2022/pagew11.vue'
import pagew12 from '../components/bill2022/pagew12.vue'
import pagew13 from '../components/bill2022/pagew13.vue'
import pagew14 from '../components/bill2022/pagew14.vue'
import pagew15 from '../components/bill2022/pagew15.vue'
import page16 from '../components/bill2022/page16.vue'
import page17 from '../components/bill2022/page17.vue'
import page18 from '../components/bill2022/page18.vue'
import html2canvas from 'html2canvas'
import { getInfo, save, addUserShare, queryUserPrizeList, GETYEARLYREPORT } from '@/api'
export default {
  // 组件的名称
  name: 'car',
  components: {
    swiper,
    swiperSlide,
    headerBox,
    footerBox,
    suspendedBall,
    home,
    page1,
    page2,
    page2y,
    page3,
    page3y,
    page4,
    page5,
    page5y,
    page6,
    page7,
    page10y,
    page10y2,
    pagew11,
    pagew12,
    pagew13,
    pagew14,
    pagew15,
    page16,
    page17,
    page18
  },
  data () {
    return {
      xp:true,
      key: 0,
      nameList: [{ "name": "登陆用户", "value": "" }, { "name": "于旭波", "value": "yuxubo" }, { "name": "陆益民", "value": "luyimin" }, { "name": "张振戎", "value": "zhangzhenrong" }, { "name": "周明春", "value": "zhoumingchun" }, { "name": "谢彪", "value": "xiebiao" }, { "name": "王会杰", "value": "wanghuijie" }, { "name": "贾大风", "value": "jiadafeng" }, { "name": "马可辉", "value": "makehui" }, { "name": "王旭升", "value": "wangxusheng" }, { "name": "罗晓舫", "value": "luoxiaofang" }, { "name": "潘臻", "value": "panzhen" }, { "name": "李亚东", "value": "liyadong" }, { "name": "唐毅", "value": "tangyi" }, { "name": "刘昆", "value": "liukun1" }, { "name": "刘海舟", "value": "liuhaizhou" }, { "name": "李旭东", "value": "lixudong" }, { "name": "程刚", "value": "chenggang" }, { "name": "丁子哲", "value": "dingzizhe" }, { "name": "李立山", "value": "lilishan" }, { "name": "万明涛", "value": "wanmingtao" },],
      nameList2: ["yuxubo", "luyimin", "zhangzhenrong", "zhoumingchun", "xiebiao", "wanghuijie", "jiadafeng", "makehui", "wangxusheng", "luoxiaofang", "panzhen", "liyadong", "tangyi", "liukun1"],
      jstshow: true,
      lastpage: 19,
      linshiData: null,
      linshiDatashow: true,
      fdpm: require('../assets/images/bill2022/5/btm2.png'),
      jscwz: require('../assets/images/bill2022/w11/ywdwz.png'),
      previousIndex: -1,
      httpsLoading: false,
      isShareFlag: false,
      noSlidingFlag: false,
      markFlag: false,
      loading: false,
      iconArr: [],
      pageFlag: true,
      page4Bg: '',
      page3Bg: '',
      rankArr: [],
      rankingText1: '',
      rankingText2: '',
      rankingText3: '',
      tipsLoading: false,
      swiperIndex: 0,
      cantaintbg: require('../assets/images/bill2022/2/bg.jpg'),
      headerTitle: [
        "", "", "", "", ""
      ],
      data: {
        portalOrgReportDTO: {
          countDate: '',
          useDays: '',
          totalActivator: '',
          totalActivatorCount: '',
          secondaryCompany: '',
          columnCount: '',
          openColumnCount: '',
          allApp: '',
          newApp: '',
          appTop: '',
          meetingCount: '',
          meetingAvg: '',
          edocCount: '',
          colCount: '',
          serviceHotlinesCount: '',
          fieldServiceCount: '',
          problemSolvingRate: '',
          topicsCount: '',
        },
        portalUserReportDTO: {
          countDate: '',
          accompanyDays: '',
          loginName: '',
          userName: '',
          createDate: '',
          viewCount: '',
          onlineTimeCount: '',
          lastDate: '',
          lastTime: '',
          longTime: '',
          longHours: '',
          workBenchCount: '',
          workBenchRate: '',
          viewEmp: '',
          useApp: '',
          appProp: '',
          useOftenAppList: '',
          page1: '',
          page2DatePre: '',
          page2: '',
          page3Person: '',
          page3Other: '',
          page4part1: '',
          page4part2: '',
          page5: '',
        },
      },
      shareFlag: true,
      musicNum: 0, //初始旋转角度
      musicRotate: 'rotate(' + 0 + 'deg)',
      interval: null, //定时器
      swiperOption2: {
        notNextTick: false,
        //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着您可以在第一时间获取到swiper对象，假如您需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: 'vertical', //水平方向移动
        grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        mousewheel: false, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        mousewheelControl: false, //同上
        // height: windowHeight, // 高度设置，占满设备高度
        resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新 // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true, // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        onTransitionStart (swiper) {
          console.log(swiper)
        },
      },
      img: '',
      pageOneImg: null,

      tagName: '',
      labelName: '',
      updateLableTotal: 0,
      specialUserPrizeList: [
        //   {
        //   mobile:'123456748962',
        //   fullname:'sdf'
        // }
      ],
      hidePageFlag: true,
      resData: null,
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    },
  },
  mounted () {
    window.ontouchstart = function (e) {
      if (e.target.tagName === 'img') e.preventDefault()
    }
    this.getData()
    setTimeout(() => {
      if(this.resData.loginName=='lihewei1'){
        this.linshiDatashow=false
      }
      
    }, 1000);
    
    // this.onTouchMove()
    // this.$nextTick(() => {
    //   let that = this
    //   function onDeviceReady () {
    //     MXCommon.responseCustomNavigator(true)
    //     //如果需要页面加载完成后，就调用平台的API，必须加在此处。不可以放在onload里。
    //     // try {
    //     //   MXCommon.sharePicToWx(
    //     //     '', // 图片base64编码
    //     //     that.completeCallback,
    //     //     that.errorCallBack
    //     //   )
    //     // //  that.getData()
    //     // } catch (error) {
    //     //   console.log(error)
    //     //   that.loading = false
    //     //   that.isShareFlag = true
    //     // }
    //   }
    //   document.addEventListener('deviceready', onDeviceReady, false) //等待cordova加载
    // })
    let _this = this;
    _this.setBodySize()
    window.onresize = function () {
      _this.setBodySize()
    }
    this.swiper.slideTo(0, 1000, false)
    this.$nextTick(() => {
      this.pageOneImg = this.$refs.pageOneImg
      // this.swiper.slideTo(19, 0, true)
    })
    console.log(document.documentElement.clientHeight/document.documentElement.clientWidth)
    if(document.documentElement.clientHeight/document.documentElement.clientWidth<2){
      this.xp=false
    }
  },
  methods: {
    jst (value) {
      if (this.nameList2.includes(value)) {
        this.jstshow = false;
        this.lastpage = 18

      }
    },
    linshi (value) {
      this.linshiData = value;
      this.linshiDatashow = true;
      this.getData()

    },
    cxckClick () {

      this.swiper.slideTo(0, 0, true)
    },
    close () {
      this.httpsLoading = false
      //调取原生方法
      MXWebui.closeWindow()
    },
    closeTips () {
      this.tipsLoading = false
      // MXWebui.closeWindow()
    },
    slideChange () {

      this.previousIndex = this.$refs.mySwiper.swiper.previousIndex
      console.log(this.previousIndex)
      this.swiperIndex = this.$refs.mySwiper.swiper.activeIndex
      if (this.swiperIndex == 3 || this.swiperIndex == 4) {
        this.cantaintbg = require('../assets/images/bill2022/2/bg.jpg')

      } else if (this.swiperIndex == 5 || this.swiperIndex == 6) {
        this.cantaintbg = require('../assets/images/bill2022/3/bg.jpg')
      } else if (this.swiperIndex == 7 || this.swiperIndex == 8) {
        this.cantaintbg = require('../assets/images/bill2022/5/bg.jpg')
      } else if (this.swiperIndex == 9 || this.swiperIndex == 10 || this.swiperIndex == 11 || this.swiperIndex == 12 || this.swiperIndex == 13 || this.swiperIndex == 14)
        this.cantaintbg = require('../assets/images/bill2022/10y/bg.jpg')

      // if (this.swiperIndex == 7) {
      //   this.fdpm = require('../assets/images/bill2022/5/btm2.png')
      // }
      // if (this.swiperIndex == 8) {
      //   this.fdpm = require('../assets/images/bill2022/5/btm3.png')
      // }

      if (this.swiperIndex == 10) {
        this.jscwz = require('../assets/images/bill2022/w11/ywdwz.png')
      }
      if (this.swiperIndex == 11) {
        this.jscwz = require('../assets/images/bill2022/w11/yspwz.png')
      }
      if (this.swiperIndex == 12) {
        this.jscwz = require('../assets/images/bill2022/w11/gwwz.png')
      }
      if (this.swiperIndex == 13) {
        this.jscwz = require('../assets/images/bill2022/w11/tzpwz.png')
      }
      if (this.swiperIndex == 14) {
        this.jscwz = require('../assets/images/bill2022/w11/tlrwz.png')
      }


    },
    setBodySize () {
      var clientWith = document.documentElement.clientWidth
      document.getElementsByTagName('html')[0].style.fontSize =
        (clientWith / 75) * 1.6 + 'px' // 默认字号：屏幕宽度/（设计图宽度/10*3.6）= 36px;
    },
    //调用报告详情
    async getData () {
      let data = {
        userName: this.linshiData
      }
      const res = await GETYEARLYREPORT(data)
      this.resData = res.data
      if (!res.code) {
        this.httpsLoading = true;
      }
      if (res.code == 500) {
        this.httpsLoading = true;
      }
      
      this.jst(this.resData.loginName)
      this.key++;
      //   console.log(this.resData, 'resData')
      if (Object.prototype.toString.call(res) !== '[object Object]') {
        this.httpsLoading = true
        this.loading = false
        return false
      }
    },


    async getUserShare () {
      let res = await addUserShare()
      console.log('分享埋点', res)
    },
    async getUserPrizeList () {
      let res = await queryUserPrizeList()
      console.log('中奖名单', res)
    },
    completeCallback (res) {
      console.log(`成功回调：${res}`)
      this.getUserShare()
      //   this.musicPause()
    },
    errorCallBack (res) {
      console.log(`失败回调：${res}`)
      this.shareFlag = true
    },
    completeCallback1 (res) {
      alert('成功')
      console.log(`成功回调：${res}`)
      // this.getUserShare()
      //   this.musicPause()
    },
    errorCallBack1 (res) {
      alert('失败')
      console.log(`失败回调：${res}`)
      this.shareFlag = true
    },
    /**
     * 播放音乐并开始旋转
     */
    // musicPlay () {
    //   this.$refs.MusicPlay.play()
    //   this.musicTF = false
    //   this.countMusicNum()
    // },

    bodyScroll (event) {
      event.preventDefault()
    },

    /**
     * 设置定时器旋转，这个是放在mouted方法中，需要页面一加载就旋转
     */
    countMusicNum () {
      let that = this
      that.interval = setInterval(function () {
        that.musicNum = that.musicNum + 10
        that.musicRotate = 'rotate(' + that.musicNum + 'deg)'
      }, 100)
    },
  },
  watch: {
    noSlidingFlag: function (n) {
      if (n) {
        document.body.addEventListener('touchmove', this.bodyScroll, {
          passive: false,
        }) // passive 参数不能省略，用来兼容ios和android
      } else {
        document.body.removeEventListener('touchmove', this.bodyScroll, {
          passive: false,
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(10deg, #fff 30%, #d3adf9 74%);
  padding-left: 2rem;
  // display: flex;
  // flex-wrap: wrap;

  padding-top: 10rem;
  .buttons {
    margin: 2.2rem;
    display: inline-block;
    width: 10.4rem;
    font-size: 2.1rem;
    text-align: center;
    color: white;
    padding: 1rem;
    background: linear-gradient(180deg, #fce8fe 20%, #7e50f7 74%);
    // background-color:pink ;
    float: left;
    border-radius: 0.8rem;
    box-shadow: 0.3rem 0.3rem 0.5rem #fff;
  }
}
.div {
  height: 10rem;
}

.swiper2 {
  width: 100%;
  height: 100vh;

  position: relative;
  background-color: #2d4bab;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow-x: hidden;
}

.swiper2 .swiper-container {
  height: 100%;
  overflow: hidden;
}

.swiper2 .swiper-slide {
  height: 100vh;
  overflow: hidden !important;
}

.swiper2 .swiper-slide div {
  box-sizing: border-box;
  //   height: 100vh;
  //   background-color: lightblue;
  //   text-align: center;
  //   border-bottom: 1px solid #e5e5e5;
}

.swiper-slide {
  box-sizing: content-box;
  padding-left: 10px;
  margin-left: -10px;
  overflow: hidden;
}

@import "./style1.less";
@import "./style2.less";

@font-face {
  font-family: "blackitalic";
  font-display: swap;
  src: url("../assets/fonts/DIN-BlackItalic.eot");
  /* IE9 */
  src: url("../assets/fonts/DIN-BlackItalic.eot?#iefix")
      format("embedded-opentype"),
    url("../assets/fonts/DIN-BlackItalic.woff2") format("woff2"),
    url("../assets/fonts/DIN-BlackItalic.woff") format("woff"),
    url("../assets/fonts/DIN-BlackItalic.ttf") format("truetype"),
    url("../assets/fonts/DIN-BlackItalic.svg#blackitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.swiper-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

// @keyframes slideUp {
//   0% {
//     transform: translateY(0);
//     transform: scale3d(1);
//   }

//   100% {
//     transform: translateY(1rem);
//     transform: scale3d(1.2);
//   }
// }

// .img1 {
//   width: 100%;
//   position: relative;
//   position: absolute;
//   bottom: 1rem;

//   .img1_img_top {
//     width: 46.875rem;
//     height: 43.25rem;
//   }

//   .img1_img_btm {
//     width: 29.625rem;
//     height: 33.625rem;
//     margin-top: -24rem;
//     margin-left: 11rem;
//   }

//   img {
//     animation: slideUp 0.6s ease-in-out;
//     animation-iteration-count: infinite;
//     animation-direction: alternate;
//   }
// }

@keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }

  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}

@-moz-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-o-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-ms-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}

.animate__fadeInUp {
  animation: fadeInUp 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.robotbox {
  position: absolute;
  height: 100%;
  overflow: hidden;
  width: 100%;
  z-index: 0;
  .robot {
    position: absolute;
    width: 20.6875rem;
    left: 4rem;
    top: 52rem;
    animation: slideUp 1s ease-in-out;
    -webkit-animation: slideUp 1s ease-in-out;
    -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
    -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
    -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 0;
  }
  .pm {
    width: 32.6875rem;
    position: absolute;
    right: 0;
    top: 33rem;
    z-index: 0;
  }
  .pm2 {
    position: absolute;
    width: 40.6875rem;
    right: -8rem;
    top: 33.5rem;
  }
}

.slideUp {
  animation: slideUp 1s ease-in-out;
  -webkit-animation: slideUp 1s ease-in-out;
  -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
  -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
  -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 41.6875rem;
  height: 33.375rem;
  position: absolute;
  bottom: 2rem;
  left: 0rem;
  // z-index: 99;
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInBottomLeft {
  animation: fadeInBottomLeft 2s ease-in-out;
  animation-iteration-count: 1;
}

.fd {
  width: 100%;
  height: 100%;
  position: absolute;
   bottom: 6rem;
  overflow: hidden;
  z-index: 0;
  .btm {
    width: 34rem;
    height: 25.3125rem;
    // position: relative;
    position: absolute;
    bottom: 23rem;
    right: -2rem;
  }
}

.jsc {
  // height: 100%;
  // width: 100%;
  position: absolute;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  bottom: 0rem;
  .fc {
    display: inline-block;
    position: absolute;
    // height: 10rem;
    width: 100vw;
    bottom: 0;
    z-index: 0;
  }

  .tpwz {
    position: absolute;
    width: 9.4rem;
    // height: 2.4rem;
    //  background: red;
    z-index: 6;
    bottom: 16rem;
    left: 39.5%;
  }
  .gwwz {
    height: 2.4rem;
  }
}

.animate__backInUp {
  animation: backInUp 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes backInUp {
  0% {
    -webkit-transform: translateY(4000px) scale(0.4);
    transform: translateY(4000px) scale(0.4);
    opacity: 0.7;
  }

  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRightb {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInRighta {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}
.animate__fadeInRightb {
  animation: fadeInRightb 1s ease-in-out;
  animation-iteration-count: 1;
}
</style>

